<template>
    <div>
        <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
            <h2 class="m-n font-thin h4 pull-left">数据库 > Mysql > 实例列表 </h2>
            <div class="btns pull-right">
                <button class="btn m-b-xs w-xs btn-dark" @click="getRowData()">获取行数据</button>
            </div>

        </div>

        <div class="wrapper-md">
            <div class="panel panel-default form-horizontal form">
                <div class="table-search">
                    <div class="panel-heading" style="background-color: #f6f8f8 !important;">
                        查询条件
                    </div>
                    <div class="row wrapper">
                        <div class="col-md-10">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">姓名:</label>
                                    <div class="col-md-9">
                                        <input v-model='searchForm.queryParams.username' type="text" placeholder="姓名"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">筛选:</label>
                                    <div class="col-md-9">
                                        <v-select url="../datas/select.json" :value.sync="select.normal" :placeholder="select.placeholder" :search-text="select.searchText" :search="select.search" :clear-button="select.clearButton"></v-select>
                                        <!--<v-select :options="select.options" :value.sync="select.normal" name="animals[]" :search="select.search" :justified="select.justified" :required="select.required" :clear-button="select.clearButton" :close-on-select="select.closeOnSelect" :limit="select.limit?3:1024" :disabled="select.disabled"></v-select>-->
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">日期:</label>
                                    <div class="col-md-9">
                                        <datepicker v-ref:dp :value.sync="date.value" :disabled-days-of-Week="date.disabled" :format="date.format.toString()" :clear-button="date.clear" :placeholder="date.placeholder"></datepicker>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="col-md-2 text-center" style="margin-bottom:0px;">
                            <button type="button" @click="getQueryParams()" class="btn btn-dark">
                                <i class="fa fa-search"></i>查询
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-list">
                    <div class="panel-heading" style="background-color: #f6f8f8 !important;">数据列表</div>
                    <div class="panel-body">

                        <ui-operate-bar :elements="operateOptions"></ui-operate-bar>

                        <!--<form id="search">
                            Search <input name="query" v-model="searchQuery">
                        </form>-->
                        <demo-grid
                                :row-events="itemActions"
                                :columns="gridColumns" :data-url="url" :field-events="fieldEvents"
                                :filter-key="searchQuery" :settings="settings" v-ref:table>
                        </demo-grid>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--modal-->
    <modal title="Fade Modal" :show.sync="modal.fadeModal" effect="fade" width="900" v-ref:formBody>
        <div slot="modal-header" class="modal-header">
            <h4 class="modal-title">
                <i class="fa fa-github-alt"></i><span>新建实例</span>
            </h4>
        </div>
        <div slot="modal-body" class="modal-body" style="padding: 30px;">
            <vf-form ajax
                     action="/echo/json"
                     method="POST"
                     :validation="validation"
                     v-ref:form>

                <!--<vf-status-bar></vf-status-bar>-->

                <vf-text
                        label="姓名"
                        placeholder="Your name"
                        name="first_name"
                        v-ref:first_name
                        lazy></vf-text>

                <vf-number label="年龄"
                           name="age"
                           placeholder="Your age"
                           v-ref:age>
                    <!--<i slot="afterField">
                        Try to enter an invalid age
                    </i>-->
                </vf-number>

                <vf-number label="小于年龄"
                           name="smaller_than_age"
                           placeholder="Smaller than your age"
                           v-ref:smaller_than_age>
                    <!--<i slot="afterField">
                        Try to enter an value greater than the Age field
                    </i>-->
                </vf-number>

                <vf-date name="birth_date"
                         v-ref:birth_date
                         value="1990-02-03"
                         label="出生日期"
                         no-input
                         format="YYYY-MM-DD"></vf-date>

                <vf-date name="graduation_date"
                         v-ref:graduation_date
                         label="毕业日期"
                         format="YYYY-MM-DD"></vf-date>


                <vf-file label="上传文件"
                         name="upload_file"
                         v-ref:upload_file></vf-file>

                <vf-password
                        label="密码"
                        name="password"
                        v-ref:password>
                </vf-password>

                <vf-email label="邮箱"
                          name="email"
                          v-ref:email></vf-email>

                <!--<vf-textarea tinymce
                             label="About yourself"
                             placeholder="Something about yourself"
                             name="about"
                             v-ref:about></vf-textarea>-->

                <vf-select name="pet"
                           v-ref:pet
                           select2
                           label="最爱的宠物"
                           :items="pets"></vf-select>

                <vf-select multiple
                           select2
                           name="motorbike"
                           v-ref:motorbike
                           label="摩托车"
                           :items="motorbikes"
                           :value="[2,3]"></vf-select>

                <vf-buttons-list name="car"
                                 v-ref:car
                                 label="汽车"
                                 :items="cars">
                </vf-buttons-list>

                <vf-buttons-list multiple
                                 name="fruit"
                                 v-ref:fruit
                                 label="水果"
                                 :items="fruits"></vf-buttons-list>

                <vf-checkbox label="结婚了吗?"
                             name="married"
                             v-ref:married></vf-checkbox>

                <vf-number name="married_years"
                           v-ref:married_years
                           label="几年了?"></vf-number>

                <vf-submit text="提交"></vf-submit>

            </vf-form>
            <button class='btn btn-default' @click='resetForm()'>Reset Form</button>
        </div>
        <div slot="modal-footer">

        </div>
    </modal>

</template>
<style lang="sass">

    .linka{
        color: goldenrod;
    }
    .linka:hover{
        text-decoration: underline;
    }

    .form-control-feedback {
        top: 25px;
    }

    .VF-Buttons__wrapper .radio > label > input{
        z-index: 1 !important;
        opacity: 1 !important;
    }

    .VF-Field--required label {
        position: relative;
    }

    .VF-Field--required>label:before {
        content: "*";
        font-size: 20px;
        color: red;
        position: absolute;
        left: -15px;
    }

    .VF-Field--Number input {
        width: 100px;
    }

    .VF-Field--Date__datepicker.date__input {
        width:130px;
    }

    .VF-Field--Date__datepicker.date__span {
        border:1px solid #ddd;
        border-radius:5px;
        padding:8px;
        width:130px;
        cursor:pointer;
    }

    .VF-Field--Date__datepicker:hover {
        background:#efefef;
    }

    .VF-Field__file-upload {
        position: relative;
    }

    .VF-Field__file-upload-icon  {
        position: absolute;
    }

    .VF-Field__file-upload input {
        opacity: 0;
        position: absolute;
        top:0;
        cursor:pointer;
    }

    .VF-Field--File {
        margin-bottom:26px;
    }

    .VF-Buttons__wrapper {
        width:50%;
    }

    .select2{
        width: 100% !important;
    }

</style>
<script>

    require('../../resources/vendor/lib/select2/select2.min.css')

    import VueStrap from 'vue-strap'

    import demoGrid from '../../resources/components/demoGrid.vue'
    import uiOperateBar from '../../resources/components/uiOperateBar.vue'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}

            let self = this

            return {        //必须使用这样的形式，才能创建出单一的作用域
                searchQuery: '',
                gridColumns:[
                    {name:"实例名称",width:"13%",field:"partyNo"},
                    {name:"运行状态",width:"13%",field:"partyName"},
                    {name:"数据库类型",width:"14%",field:"organizationName"},
                    {name:"实例类型",width:"13%",field:"departmentName"},
                    {name:"创建时间",width:"13%",field:"businessType"},
                    {name:"到期日期",width:"14%",field:"certificateType"}
                ],
                fieldEvents: {
                    "departmentNameFormat":function(value,row){
                        if(value){
                            return '是'
                        }else{
                            return '否'
                        }
                    },
                    "partyNoColor":function(value,row){
                        var color = "goldenrod";
                        return color;
                    }
                },
                url:"../datas/roles.json",
                settings:{
                    autoLoad: true,
                    pageSize: 7,
                    showCheckBox: true
                },
                itemActions: {
                    show: true,
                    width: "20%",
                    events: [
                        {
                            name: '管理',
                            icon: 'pencil',
                            class: 'btn-default',
                            click:function(row){

                            }
                        },
                        {
                            name: '续费',
                            icon: 'pencil',
                            class: 'btn-default',
                            click:function(row){

                            }
                        }
                    ]
                },
                searchForm:{
                    queryParams:{
                        username:null
                    }
                },
                select:{
                    options: [
                        {value: 1, label: 'Cat'},
                        {value: 2, label: 'Cow'},
                        {value: 3, label: 'Dog'},
                        {value: 4, label: 'Elephant'},
                        {value: 5, label: 'Fish'},
                        {value: 6, label: 'Lion'},
                        {value: 7, label: 'Tiger'},
                        {value: 8, label: 'Turtle'}
                    ],
                    justified: true,
                    search: true,
                    required:true,
                    clearButton:true,
                    closeOnSelect:true,
                    disabled:false,
                    normal:null,
                    placeholder:'请选择...',
                    searchText:'关键字'
                },
                date: {
                    disabled: [],
                    value: '2016-06-06',
                    formats: [
                        {value: 'dd/MM/yyyy', label: 'dd/MM/yyyy'},
                        {value: 'dd-MM-yyyy', label: 'dd-MM-yyyy'}
                    ],
                    format: ['yyyy-MM-dd'],
                    clear: false,
                    placeholder: 'placeholder is displayed when value is null or empty'
                },
                operateOptions:[
                    {name: "刷新", type:"button", class:"btn-dark", icon:"refresh", events: {
                        clicker: function(data, element) {
                            alert("刷新");
                        }
                    }},
                    {name: "新建实例", type:"button", class:"btn-dark", icon:"plus", events: {
                        clicker: function(data, element) {
                            //alert("新建实例");
                            //self.$router.go({name:'createInstance',params:{},query:{}});
                            self.openModal();
                        }
                    }},
                    {name: "更多操作", type:"buttons", class:"btn-dark", icon: "th-large", items: [
                        {name: "添加", icon: "plus", disabled:true, events: {
                            clicker: function(data, item, element) {
                                alert("更多操作-添加");
                            }
                        }},
                        {name: "删除", icon: "remove", events: {
                            clicker: function(data, item, element) {
                                alert("更多操作-删除");
                            }
                        }},
                        {name: "编辑", icon: "pencil", disabled:true, events: {
                            clicker: function(data, item, element) {
                                alert("更多操作-编辑");
                            }
                        }}
                    ]},
                    {name: "项目名称", type:"search", placeholder: "项目名称", value: "", events: {
                        submitter: function(data, element) {
                            alert("submitter");
                        }
                    }}
                ],
                modal:{
                    fadeModal:false
                },
                validation: {
                    rules: {
                        first_name: {
                            required: true,
                            min: 4
                        },
                        age: {
                            required: true,
                            between: [0, 120]
                        },
                        password: {
                            required: true
                        },
                        pet: {
                            required: true
                        },
                        motorbike: {
                            required: true
                        },
                        email: {
                            required: true
                        },
                        about: {
                            max: 200
                        },
                        smaller_than_age: {
                            required: true,
                            between: [0, 120],
                            smallerThan: 'age'
                        },
                        birth_date: {
                            required: true,
                        },
                        graduation_date: {
                            required: true,
                            greaterThan: 'birth_date'
                        },
                        married_years: {
                            requiredIf: 'married',
                            min: 0
                        }
                    },
                    messages:{
                        first_name: {
                            required:"用户名不能为空"
                        },
                        age: {
                            required: "年龄不能为空",
                            between: "年龄不能小于0,不能大于120"
                        },
                        smaller_than_age: {
                            required: "年龄不能为空",
                            between: "年龄不能小于0,不能大于120",
                            smallerThan: "年龄要小于上一个年龄"
                        },
                        password: {
                            required: "密码不能为空"
                        },
                        pet: {
                            required: "宠物不能为空"
                        },
                        motorbike: {
                            required: "摩托车不能为空"
                        },
                        email: {
                            required: "邮箱不能为空"
                        }
                    }
                },
                pets: [{
                    id: 1,
                    text: 'Dog'
                }, {
                    id: 2,
                    text: 'Cat'
                }, {
                    id: 3,
                    text: 'Parrot'
                }, {
                    id: 4,
                    text: 'Hamster'
                }],
                cars: [{
                    id: 1,
                    text: 'Mazda'
                }, {
                    id: 2,
                    text: 'Honda'
                }, {
                    id: 3,
                    text: 'Nissan'
                }, {
                    id: 4,
                    text: 'Alpha Romeo'
                }],
                fruits: [{
                    id: '1',
                    text: 'Grapes'
                }, {
                    id: '2',
                    text: 'Apple'
                }, {
                    id: '3',
                    text: 'Orange'
                }, {
                    id: '4',
                    text: 'Lemon'
                }],
                motorbikes: [{
                    id: 1,
                    text: 'Honda'
                }, {
                    id: 2,
                    text: 'Suzuki'
                }, {
                    id: 3,
                    text: 'Kawassaki'
                }, {
                    id: 4,
                    text: 'Yamaha'
                }],
                person:{
                    first_name:'哈哈哈'
                }
            }
        },
        watch: {
            disabled () {
                this.$refs.dp.getDateRange()
            },
            format (newV) {
                this.value = this.$refs.dp.stringify()
            }
        },
        ready () {
            this.$refs.first_name.setValue('哈哈哈');
            this.$refs.birth_date.setValue('2016-08-08');
            this.$refs.graduation_date.setValue('2016-09-09');

            this.asideExpand();
        },
        methods: {
            getRowData () {
                var rowData = this.$refs.table.getData()[0];
                console.log(rowData.name,rowData.power,rowData.age,rowData.email);
            },
            getQueryParams () {
                console.log(this.select.normal);
            },
            asideExpand () {
                this.$dispatch('asideExpand');   //侧边栏展开
            },
            openModal () {
                this.modal.fadeModal = true;
            },
            resetForm: function() {
                //console.log(this.$refs.first_name.value,this.$refs.graduation_date.value);
                console.log(this.$refs.form.$children);
                this.$refs.form.$children.forEach(function(field) {
                    console.log(field.name+':'+field.value);
                })
            }
        },
        events: {

        },
        components: {
            demoGrid,
            uiOperateBar,
            vSelect:VueStrap.select,
            vOption:VueStrap.option,
            datepicker:VueStrap.datepicker,
            modal:VueStrap.modal
        }
    }

</script>
